<template>
	<Cascader
		:value="value"
		:data="categories"
		:clearable="clearable"
		:disabled="disabled"
		:transfer="transfer"
		:change-on-select="changeOnSelect"
		transfer
		@on-change="handleChange"
		@on-visible-change="handleVisibleChange"
	/>
</template>

<script>
export default {
	name: 'selectCategory',
	props: {
		value: {
			type: Array,
			default: function() {
				return [];
			}
		},
		clearable: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		transfer: {
			type: Boolean,
			default: false
		},
		changeOnSelect: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		categories() {
        	return this.$store.state.app.categories;
        }
	},
	mounted() {
		// 检查并更新品牌数据
		this.$store.dispatch('getCategoryData');
	},
	methods: {
		handleChange(value, selectedData) {
			this.$emit('input', value);
			this.$emit('on-change', value, selectedData);
		},
		handleVisibleChange(status) {
			this.$emit('on-visible-change', status);
		}
	}
}
</script>